import React, { Component } from 'react'
import { Text, StyleSheet, View, ScrollView, Button, TouchableOpacity } from 'react-native'

// 引入组件
// import FlexDirection from './FlexDirection'

export default class index extends Component {

  renderItem({title, target, bgColor = '#dfb'}) {
    const { navigate } = this.props.navigation;

    return (
      <TouchableOpacity
        onPress={() => navigate(target)}
        style={{marginVertical: 5}}
      >
        <View style={{backgroundColor: bgColor, height: 40}}>
          <Text style={{padding: 10, fontSize: 16}}>{title}</Text>
        </View>
      </TouchableOpacity>
    );
  }

  render() {
    return (
      <View style={[styles.container]}>
        <ScrollView>
          {/* <Text style={styles.h2}>弹性布局</Text> */}

          {this.renderItem({
            title: 'flexDirection',
            target: 'FlexDirection'
          })}

          {this.renderItem({
            title: 'justifyContent',
            target: 'JustifyContent'
          })}

          {this.renderItem({
            title: 'alignItems',
            target: 'AlignItems'
          })}

          {this.renderItem({
            title: 'flex',
            target: 'Flex'
          })}

          {this.renderItem({
            title: 'flexWrap',
            target: 'FlexWrap',
            bgColor: '#99e'
          })}

          {this.renderItem({
            title: 'alignContent',
            target: 'AlignContent',
            bgColor: '#99e'
          })}

          {this.renderItem({
            title: 'flexGrow',
            target: 'FlexGrow',
            bgColor: '#99e'
          })}

          {this.renderItem({
            title: 'flexShrink',
            target: 'FlexShrink',
            bgColor: '#99e'
          })}

          {this.renderItem({
            title: 'flexBasis',
            target: 'FlexBasis',
            bgColor: '#99e'
          })}

        </ScrollView>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    margin: 10,
    flexDirection: 'column',
    justifyContent: 'flex-start'
  },
  h2: {
    fontSize: 30,
    fontWeight: 'bold'
  }
})
